<template>
  <div class="wrapper">
    <div class="list-head">
      <div class="list-title">{{title}}</div>
      <div class="list-more" @click="moreClick">查看该电影详情&nbsp;&gt;&gt;&gt;</div>
    </div>
    <div class="list-wrapper">
      <div
        class="item-wrapper"
        v-for="(item, index) of list"
        :key="item.movie_id"
        :class="{active: chooseIndex == index}"
      >
        <div
          class="item-cover"
          @click="handleItemClick"
          :data-id="item.movie_id"
          :data-index="index"
          @touchstart="touchStart"
          @touchmove="touchMove"
          @touchend="touchEnd"
          :ref="'movie-' + index"
        ></div>
        <div class="item">
          <div class="item-top">
            <img :src="item.cover_pic" class="item-img"/>
            <div class="item-score">{{item.douban_score}}</div>
          </div>
          <div class="item-middle">
            <div class="item-title">{{item.name}}</div>
          </div>
          <div class="item-bottom">
            <div class="item-desc">{{item.classification}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ListSliderForMyComment',
  props: {
    list: Array,
    title: String
  },
  data () {
    return {
      newList: this.list,
      chooseIndex: 0,
      timer: null
    }
  },
  updated () {
  },
  methods: {
    handleItemClick (e) {
      let movieId = e.target.dataset.id
      let id = e.target.dataset.index
      this.chooseIndex = id
      this.$emit('choose', movieId)
    },
    touchStart (e) {
      let that = this
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        that.$router.push('/detail/' + e.target.dataset.id)
      }, 600)
    },
    touchEnd () {
      clearTimeout(this.timer)
    },
    touchMove () {
      clearTimeout(this.timer)
    },
    moreClick () {
      let id = this.$refs['movie-' + this.chooseIndex][0].dataset.id
      this.$router.push('/detail/' + id)
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .wrapper
    .list-head
      width: 100%
      height: .5rem
      overflow: hidden
      display: flex
      justify-content: space-between
      align-items: center
      .list-title
        height: .5rem
        color: rgba(0, 0, 0, .9)
        font-size: .21rem
        line-height: .5rem
        font-weight: 500
        margin-left: .15rem
      .list-more
        height: .5rem
        color: rgba(0, 0, 0, .9)
        font-size: .13rem
        line-height: .5rem
        font-weight: 500
        margin-right: .15rem
    .list-wrapper
      &::-webkit-scrollbar
        background-color: transparent;
      overflow-x: scroll
      overflow-y: hidden
      height: 2.50rem
      display: flex
      .active
        background: #F2F2F2
      .item-wrapper
        box-sizing: border-box
        width: 1.4rem
        padding: .10rem
        flex-shrink: 0
        position: relative
        .item-cover
          z-index: 1000
          position: absolute
          top: 0
          left: 0
          right: 0
          bottom: 0
          background: rgba(0, 0, 0, 0)
        .item
          border-radius: .05rem
          width: 100%
          .item-top
            overflow: hidden
            height: 0
            width: 100%
            padding-bottom: 139.6%
            position: relative
            border-radius: .2rem
            .item-img
              width: 100%
              height: 100%
              position: absolute
            .item-score
              width: .2rem
              line-height: .20rem
              font-size: .16rem
              font-weight: bolder
              color: orange
              position: absolute
              bottom: .05rem
              right: .07rem
          .item-middle
            padding-top: .07rem
            padding-left: .04rem
            display:flex
            justify-content center
            height: .20rem
            .item-title
              flex: 1
              color: #000
              font-size: .15rem
              line-height: .20rem
              ellipsis()
          .item-bottom
            padding-top: .02rem
            padding-left: .04rem
            display:flex
            justify-content center
            height: .20rem
            .item-desc
              flex: 1
              color: #ccc
              font-size: .14rem
              line-height: .20rem
              ellipsis()
</style>
